<script setup lang="ts">
const images = ref([
  { href: 'http://localhost:4000/src/assets/img/slider1.png' },
  { href: 'http://localhost:4000/src/assets/img/slider2.png' },
  { href: 'http://localhost:4000/src/assets/img/slider3.png' },
  { href: 'http://localhost:4000/src/assets/img/slider4.png' }
])
const products = ref([
  {
    id: 1,
    name: 'IPhone',
    price: '123',
    img: 'http://localhost:4000/src/assets/img/slider1.png'
  },
  {
    id: 2,
    name: 'XiaoMi',
    price: '123',
    img: 'http://localhost:4000/src/assets/img/slider1.png'
  },
  {
    id: 3,
    name: 'HUAWEI',
    price: '123',
    img: 'http://localhost:4000/src/assets/img/slider1.png'
  }
])
</script>

<template>
  <div class="container">
    <MallSearch />
    <div class="mall-nav">
      <div class="nav">
        <p>分类</p>
        <div class="nav-item"></div>
      </div>
      <BoxSlider :images="images" />
    </div>
    <div class="recommended">
      <div class="recommended-title">猜你喜欢</div>
      <div class="products">
        <router-link v-for="(product, index) in products" :key="index" :to="{ name: 'product-detail', params: { id: product.id } }">
          <div class="product">
            {{ product.name }}
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$productPadding: 12px;
$productMargin: 8px;
$productWidth: 360px;
$productHeight: 180px;
$recommendedPadding: 24px;
$recommendedWidth: calc(($productWidth + 2 * $productMargin) * 3 + 2 * $recommendedPadding);
$containerWidth: $recommendedWidth;

.container {
  display: flex;
  flex-direction: column;
  width: $containerWidth;

  //min-width: $containerWidth;
  margin: auto;
  padding: 32px 0;
  align-items: center;

  .mall-nav {
    background-color: #fff;
    width: 100%;
    padding: 24px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;

    .nav {
      width: 36%;
      padding: 16px;
      background-color: red;
      border-radius: 8px;

      p:nth-child(1) {
        font-size: 16px;
        font-weight: 600;
      }
    }

    .slider-content {
      //min-width: 640px;
      display: flex;
      justify-content: center;
      width: 72%;
    }
  }

  .recommended {
    background-color: #fff;
    width: 100%;
    padding: $recommendedPadding;

    .recommended-title {
      font-size: 20px;
      font-weight: 600;
      margin: $productMargin;
    }

    .products {
      display: flex;
      flex-wrap: wrap;

      .product {
        width: $productWidth;
        height: $productHeight;
        background-color: rgb(220 220 220 / 49%);
        margin: $productMargin;
        padding: $productPadding;
        border-radius: 4px;
        cursor: pointer;
        color: black;
      }

      .product:hover {
        border: 1px solid $redPressed;
      }
    }
  }
}

// media width < 768px
@media screen and (width <= 1180px) {
  $recommendedWidth: calc(($productWidth + 2 * $productMargin) * 2 + 2 * $recommendedPadding);
  $containerWidth: $recommendedWidth;

  .container {
    width: $containerWidth;
  }
}

@media screen and (width <= 800px) {
  $recommendedPadding: 12px;
  $recommendedWidth: calc(($productWidth + 2 * $productMargin) * 1 + 2 * $recommendedPadding);
  $containerWidth: $recommendedWidth;

  .container {
    width: $containerWidth;

    .recommended {
      padding: $recommendedPadding;
    }
  }
}
</style>
